<template>
  <div class="login-bg">
    <div class="login-box">
      <div class="header">
        登录
      </div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm el-row" status-icon>
        <el-form-item label="名字" prop="username" class="el-col el-col-22">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="passWord" class="el-col el-col-22">
          <el-input v-model="ruleForm.passWord" type="password" />
        </el-form-item>
        <el-form-item class="el-col el-col-22">
          <el-button style="width:100%" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang=ts>
import { ref, reactive } from "vue";

import { ElMessage } from "element-plus";
import type { FormRules, FormInstance } from "element-plus";
import { useRouter } from "vue-router";
import { userLogin } from "@/api/api";
import storage from "@/utils/storage";

// import { SM4 } from "gm-crypto";
// import { SM4Util } from "./sm4encry";
// import { SM4 } from "./sm4";

const ruleFormRef = ref<FormInstance>();
const router = useRouter();

storage.remove("token");

const ruleForm = reactive({
  username: "",
  passWord: "",
});

const rules = reactive<FormRules>({
  username: [
    { required: true, message: "请输入用户名" },
    { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" },
  ],
  region: [{ required: true, message: "请输入密码" }],
});

// const encryption = (data: string): string => {
//   let options: SM4.EncryptOptions = {
//     outputEncoding: "base64",
//   };
//   let Pwd = SM4.encrypt(data, "administrator@cn", options);
//   return Pwd;
// };

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let sm4Config = {
        //配置sm4参数
        key: "administrator@cn", //这里这个key值是跟后端要的
        mode: "cbc", // 加密的方式有两种，ecb和cbc两种，也是看后端如何定义的，不过要是cbc的话下面还要加一个iv的参数，ecb不用
        iv: "administrator@cn",
        cipherType: "base64",
      };
      let sm4 = new SM4(sm4Config);

      const req = {
        username: ruleForm.username,
        password: sm4.encrypt(ruleForm.passWord),
      };
      const res: any = await userLogin(req);
      if (res.statusCode === 200) {
        storage.set("token", res.data.caNo);
        console.log(storage.get("token"));
        router.push({
          path: "/home/task/patrolInspection",
        });
      } else {
        ElMessage({
          message: res.message,
          type: "warning",
        });
      }
    } else {
      return false;
    }
  });
};
</script>

<style lang='less'>
.login-bg {
  height: 100%;
  background: url("../assets/bg.jpg") no-repeat center;
  background-size: 100%;
  .login-box {
    position: absolute;
    top: 25%;
    left: 8%;
    width: 30vw;
    height: 30vh;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    .header {
      text-align: center;
      padding: 1vh 0;
      color: #fff;
      letter-spacing: 10px;
      font-size: 2vw;
    }
  }
}
</style>